body,
html{
	background-color: #1d1f20;
	color: #ffffff;
}
.moon{
	position: absolute;
	top: 0;
	right: 0;
}
.container {
  height: 300px;
  width: 300px;

  margin:50px;
}
.person {
  position: absolute;
  height: 75px;
  width: 0;
  color: #fff;
  left: 150px;
  top: 159px;
  transform-origin: 50% 50% 0px;
  -webkit-animation: sprint 2s infinite ease-in;
}
/* 画帽子檐 */
.person .head:before {
  content: "";
  position: absolute;
  top: 0px;
  left: -6px;
  height: 2.7px;
  width: 42px;
  border-radius: 20%;
  border: 4px solid white;
  background-color: #fff;
  transform-origin: 50% 100% 0px;
  z-index: 90;
}
/* 画人脸 */
.person .head {
  position: absolute;
  top: -30px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 4px solid white;
  transform-origin: 50% 100% 0px;
  z-index: 90;
  -webkit-animation: bob 2s infinite alternate;
}
/* 画帽子顶 */
.person .head:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 9px;
  height: 12px;
  width: 15px;
  border-radius: 30%;
  border: 4px solid white;
  background-color: #fff;
  z-index: 90;
}
/* 画中间腰 */
.person .torso {
  position: absolute;
  height: 60px;
  width: 0;
  border-left: 2px solid white;
  left: 0px;
  top: 15px;
  z-index: 90;
}

.person .part {
  position: absolute;
  left: 0;
  top: 75px;
  z-index: 90;
}
.person .part.arm {
  position: absolute;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  height: 45px;
  width: 39px;
  top: 15px;
  right: 300px;
  transform-origin: 0% 0% 0px;
  -webkit-animation: pump 1s infinite ease-in-out;
}
.person .part.arm.one {
  transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
  transform: rotate3d(0, 0, 1, -90deg);
  animation-delay: .5s;
}
.person .part.leg {
  height: 57px;
  width: 60px;
  border-right: 3px solid white;
  border-top: 3px solid white;
  -webkit-animation: run 1s infinite ease-in;
  transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
  transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
  transform: rotate3d(0, 0, 1, 80deg);
  animation-delay: .5s;
}
.person .part .foot {
  position: absolute;
  top: 90px;
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #ffffff;
  z-index: 900;
  border: 3px solid red;
}
@keyframes run {
  0% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 150deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
  }
}
@keyframes pump {
  0% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, -70deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 1, -180deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -100deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, 100deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes sprint {
  0% {
    transform-origin: 50% 50% 0px;
    transform: translate(-500px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    transform-origin: 50% 50% 0px;
    transform: translate(500px, 0px);
  }
}